<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dodou-移动框架-列表</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="css/weui.css">
	<link rel="stylesheet" href="css/jquery-weui.css">
	<link rel="stylesheet" href="css/style.css">
	<style>
		.hint-val{
			background:#5a87cc;
			/*padding:3px 8px;*/
			width: 25px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			border-radius: 50%;
			color:#fff;
			font-size: 14px;
		}
	</style>
</head>
<body>
    <div class="weui-cells">
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>标题文字</p>
	    </div>
	    <div class="weui-cell__ft">说明文字</div>
	  </div>
	</div>

	<div class="weui-cells">
	  <div class="weui-cell">
	    <div class="weui-cell__hd"><img src="images/icon1.png" width="20" height="20"></div>
	    <div class="weui-cell__bd">
	      <p>标题文字</p>
	    </div>
	    <div class="weui-cell__ft">说明文字</div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__hd"><img src="images/icon2.png" width="20" height="20"></div>
	    <div class="weui-cell__bd">
	      <p>标题文字</p>
	    </div>
	  </div>
	</div>

	<div class="weui-cells">
	  <a class="weui-cell weui-cell_access" href="javascript:;">
	    <div class="weui-cell__hd"><img src="images/icon2.png" width="20" height="20"></div>
	    <div class="weui-cell__bd">
	      <p>数据统计</p>
	    </div>
	    <div class="weui-cell__ft">
	    </div>
	  </a>
	  <a class="weui-cell weui-cell_access" href="javascript:;">
	    <div class="weui-cell__bd">
	      <p>数据统计</p>
	    </div>
	    <div class="weui-cell__ft">
	    </div>
	  </a>
	</div>

	<div class="weui-cells">
	  <a class="weui-cell weui-cell_access" href="javascript:;">
	    <div class="weui-cell__bd">
	      <p>订单数量</p>
	    </div>
	    <div class="hint-val">5</div>
	    <div class="weui-cell__ft">
	    </div>
	  </a>
	  <a class="weui-cell weui-cell_access" href="javascript:;">
	    <div class="weui-cell__bd">
	      <p>订单数量</p>
	    </div>
	    <div class="hint-val">10</div>
	    <div class="weui-cell__ft">
	    </div>
	  </a>
	</div>

	<div class="weui-panel weui-panel_access">
	  <div class="weui-panel__hd">图文组合列表</div>
	  <div class="weui-panel__bd">
	    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
	      <div class="weui-media-box__bd">
	        <h4 class="weui-media-box__title">标题一</h4>
	        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
	      </div>
	    </a>
	    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
	      <div class="weui-media-box__hd">
	        <img class="weui-media-box__thumb" src="images/icon2.png">
	      </div>
	      <div class="weui-media-box__bd">
	        <h4 class="weui-media-box__title">标题二</h4>
	        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
	      </div>
	    </a>
	  </div>
	  <div class="weui-panel__ft">
	    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
	      <div class="weui-cell__bd">查看更多</div>
	      <span class="weui-cell__ft"></span>
	    </a>    
	  </div>
	</div>

	<div class="weui-panel__bd">
      <div class="weui-media-box weui-media-box_text">
        <h4 class="weui-media-box__title">标题一</h4>
        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
        <ul class="weui-media-box__info">
          <li class="weui-media-box__info__meta">文字来源</li>
          <li class="weui-media-box__info__meta">时间</li>
          <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
        </ul>
      </div>
    </div>

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-weui.min.js"></script>
</body>
</html>